/**
 单独抽取出来的css文件
*/
@font-face {
  font-family: "iconfont";
  /* Project id 2561986 */
  src: url('../fonts/iconfont.woff') format('woff2'), url('../fonts/iconfont.woff?t=1621560946278') format('woff'), url('../fonts/iconfont.ttf?t=1621560946278') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 引入彩色图片 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 50px;
}
.icon-jiangpai:before {
  content: "\e830";
}
.icon-youjiantou-copy:before {
  content: "\e831";
}
.icon-shouye:before {
  content: "\e61d";
}
.icon-qita:before {
  content: "\e66a";
}
.icon-liebiao:before {
  content: "\e76a";
}
.icon-huiyuanzhongxin:before {
  content: "\e637";
}
.icon--:before {
  content: "\e622";
}
.icon-saoyisao:before {
  content: "\e60c";
}
.icon-dizhi:before {
  content: "\e61c";
}
.icon-gouwuche:before {
  content: "\e699";
}
.icon-zuojiantou:before {
  content: "\e604";
}
/* 公共的通用样式 */
/* 去掉所有的默认空隙 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 设置字体大小和颜色 */
body {
  background-color: #ccc;
  color: #3c3c3c;
  font-size: 12/16rem;
}
/* 去掉列表的圆点 */
ul,
ol,
li {
  list-style: none;
}
img {
  vertical-align: middle;
}
/* 设置a标签的样式 */
a {
  color: #3c3c3c;
  text-decoration: none;
}
/* 浮动有关 */
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearBox::after {
  content: "上元教育";
  display: block;
  clear: both;
  width: 0;
  height: 0;
  overflow: hidden;
}
/*

 移动端的适配方案 
          1、 固定宽度法  弊端  只能应用于单一的设别  不能够用做设备的切换 

          2、 百分比的方法
          3、 flex 布局 
            2-3 的优缺点   只能适配宽度 高度无法适配

           4. rem 移动端适配方案

               em   相对去父元素字体大小倍数 
                
               rem  相对于根节点字体大小倍数

           4.1 rem 是一个单位 
               1rem    16px

               以iphone5 为开发基准  默认字体大小16像素   20rem就能够沾满整个宽度【适配任意屏幕 即为 20rem = 100%】
                    20rem = 320  16px
               切换了设备 宽度变宽  20rem=100%
                     20rem = 375   18.75px


            4.2 适配的时候 
               由像素   转为 rem 单位
               实际开发 美工  px 单位 
               px单位 转为  rem 


            iphone为基准 
                1rem   16px 
                20rem   ===  100%的宽度 

                320/16rem   ====  100%的宽度


*/
/*
  宽度和高度的适配

*/
@media only screen and (device-width: 320px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (device-width: 375px) {
  html {
    font-size: 18.75px;
  }
}
@media only screen and (device-width: 414px) {
  html {
    font-size: 20.7px;
  }
}
@media only screen and (device-width: 360px) {
  html {
    font-size: 18px;
  }
}
.head {
  width: 320/16rem;
  height: 40/16rem;
  line-height: 40/16rem;
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.head-home {
  width: 40/16rem;
  color: white;
  text-align: center;
}
.head-home .iconfont {
  font-size: 18/16rem;
}
.head-search {
  width: 240/16rem;
}
.head-search input {
  width: 100%;
  height: 30/16rem;
  border: none;
  outline: none;
}
.head-login {
  width: 40/16rem;
  text-align: center;
}
.foot {
  width: 320/16rem;
  height: 60/16rem;
  position: fixed;
  background-color: #fff;
  z-index: 99999999;
  bottom: 0;
  left: 0;
  right: 0;
}
.foot li {
  width: 20%;
  float: left;
  text-align: center;
  padding: 15/16rem 0;
}
.container {
  margin-top: 40/16rem;
  margin-bottom: 65/16rem;
}
